<template>
  <div class="searchpage">
    <form action="/">
      <van-search
        @search="onSearch(value)"
        v-model="value"
        show-action
        placeholder="请输入作品名、创作人"
        class="search"
      >
        <template #action>
          <div @click="$router.push({ path: '/searchfind' })">取消</div>
        </template>
      </van-search>
    </form>
    <div class="hotsearch" v-if="value == ''">
      <div v-if="hislist.length!=0" class="title">历史搜索</div>
      <div v-if="hislist.length!=0" class="itembox">
        <i @click="deletehis" class="iconfont icon-shanchu1"></i>
        <div
          class="item"
          v-for="(i,index) in hislist"
          :key="index"
          @click="searItem(i)"
        >
          {{ i }}
        </div>
      </div>
      <div class="title">热门搜索</div>
      <div class="itembox">
        <div
          class="item"
          v-for="i in hotlist"
          :key="i.id"
          @click="searItem(i.name)"
        >
          {{ i.name }}
        </div>
      </div>
      
    </div>
    <div class="searchres" v-else>
      <van-tabs sticky offset-top="56px" swipeable class="mytabs">
        <van-tab title="作品" class="worktab">
          <div class="xiala">
            <van-dropdown-menu class="sele">
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item class="technical" title="专业搜索">
                <van-cell center>
                  <div class="classify">
                    <span class="title">作品分类</span>
                    <div class="itembox">
                      <div
                        class="item"
                        v-for="i in classifylist.category"
                        :key="i.id"
                      >
                        <span>{{ i.name }}</span>
                      </div>
                    </div>
                    <span class="title">范围</span>
                    <div class="itembox">
                      <div
                        class="item"
                        v-for="(i, index) in classifylist.system_tags"
                        :key="index"
                      >
                        <span>{{ i.name }}</span>
                      </div>
                    </div>
                    <span class="title">时长</span>
                    <div class="itembox">
                      <div
                        class="item"
                        v-for="(i, index) in classifylist.duration"
                        :key="index"
                      >
                        <span>{{ i.name }}</span>
                      </div>
                    </div>
                    <span class="title">清晰度</span>
                    <div class="itembox">
                      <div
                        class="item"
                        v-for="(i, index) in classifylist.resolution"
                        :key="index"
                      >
                        <span>{{ i.name }}</span>
                      </div>
                    </div>
                    <span class="title">比例</span>
                    <div class="itembox">
                      <div
                        class="item"
                        v-for="(i, index) in classifylist.screen_type"
                        :key="index"
                      >
                        <span>{{ i.name }}</span>
                      </div>
                    </div>
                  </div>
                </van-cell>
                <div class="btn">
                  <van-button type="default">重置</van-button>
                  <van-button type="danger">确定</van-button>
                </div>
              </van-dropdown-item>
            </van-dropdown-menu>
              <ButTon @click.native="onClick" class="btn" :download="download"></ButTon>
          </div>
          <div class="head">
            共<span> {{ allWork }} </span>部作品
          </div>
          <FinddeItem class="card" :list="resList"></FinddeItem>
        </van-tab>
        <van-tab title="创作人">
          <div class="creatorbox">
            <div class="kong" v-if="creatorCount==0">
              <img src="../../public/assets/creator2.jpg" alt="">
              <p>没有搜索到创作人</p>
          </div>
          <div v-if="creatorCount!=0" class="you">
            <p>共<span>{{creatorCount}}</span>位创作人</p>
            <CreatorItem class="creatorcard" :list="creatorList"></CreatorItem>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import FinddeItem from "@/components/FinddeItem.vue";
import ButTon from "@/components/ButTon.vue";
import CreatorItem from "@/components/CreatorItem.vue";
import { Search } from "vant";
import { Tab, Tabs } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Button } from "vant";
Vue.use(Button);
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      download:0,
      hotlist: [],
      value: "",
      resList: [],
      allWork: null,
      classifylist: {},
      creatorList:[],
      creatorCount:null,
      hislist:['nihao','nh'],
      value1: "hot",
      option1: [
        { text: "最热门", value: "hot" },
        { text: "最匹配", value: "default" },
        { text: "新发布", value: "addtime" },
      ],
    };
  },
  components: {
    FinddeItem,
    ButTon,
    CreatorItem
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/xpc/search/recommend_kws")
      .then((res) => {
        this.hotlist = res.data.data.list;
      });
      //分类
    this.axios.get("https://apis.netstart.cn/xpc/search/config").then((res) => {
      this.classifylist = res.data.data;
    });
    this.hislist = JSON.parse(window.localStorage.getItem('hislist'))||[]
  },
  methods: {
    deletehis(){
      this.hislist=[];
      window.localStorage.setItem('hislist',JSON.stringify(this.hislist))
    },
    onSearch(value) {
      this.resList=null;
      console.log(value);
      this.hislist = this.hislist.filter((n)=>{
        if(value!=n){
          return n;
        }
      })
      this.hislist.unshift(value);
      window.localStorage.setItem('hislist',JSON.stringify(this.hislist))
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=article&kw=" +
            value +
            "&sort=" +
            this.value1+"&page&allow_download="+this.download
        )
        .then((res) => {
          this.resList = res.data.data.list;
          this.allWork = res.data.data.total;
        });
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=creator&kw=" +
            value +
            "&sort=" +
            this.value1+"&page&allow_download="+this.download
        )
        .then((res) => {
          this.creatorList=res.data.data.list;
          this.creatorCount=res.data.data.total;
        });
    },
    searItem(kw) {
      this.value = kw;
      this.onSearch(this.value);
    },
    onClick(){
      this.download=!this.download
      this.download=this.download*1
    }
  },
  watch: {
    value1: function (n) {
      this.resList=null;
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=article&kw=" + this.value + "&sort=" + n +"&page&allow_download="+this.download
        )
        .then((res) => {
          this.resList = res.data.data.list;
          this.allWork = res.data.data.total;
        });
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=creator&kw=" + this.value + "&sort=" + n +"&page&allow_download="+this.download
        )
        .then((res) => {
          this.creatorList=res.data.data.list;
          this.creatorCount=res.data.data.total;
        });
    },
    download:function(n){
      this.resList=null;
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=article&kw=" + this.value + "&sort=" + this.value1 +"&page&allow_download="+n
        )
        .then((res) => {
          this.resList = res.data.data.list;
          this.allWork = res.data.data.total;
        });
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=creator&kw=" + this.value + "&sort=" + this.value1 +"&page&allow_download="+ n
        )
        .then((res) => {
          this.creatorList=res.data.data.list;
          this.creatorCount=res.data.data.total;
        });
    }
  },
};
</script>

<style lang="less" scoped>
.searchpage {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  padding-top: 56px;
  .search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 56px;
  }
  .cancel {
    width: 44px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hotsearch {
    .title {
      font-size: 16px;
      font-weight: 600;
      margin: 20px 0;
    }
    padding: 0 15px;
    .itembox {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      i{
        position: absolute;
        right: 10px;
        top: -35px;
        color: black;
      }
      .item {
        margin: 0 10px 10px 0px;
        font-size: 12px;
        padding: 6px 15px;
        background-color: #f7f7f7;
        border-radius: 5px;
        color: #444;
      }
    }
  }
  .mytabs {
    .worktab {
      .card {
        padding: 0px 20px;
      }
      .xiala {
        position: fixed;
        width: 100%;
        top: 100px;
        z-index: 12;
        background-color: #fff;
        border-top: 1px solid #f7f7f7;
        border-bottom: 1px solid #f7f7f7;
        display: flex;
        align-items: center;
        height: 48px;
        .btn{
            position: absolute;
            right: 20px;
          }
        .van-dropdown-menu {
          width: 50%;
          /deep/.van-dropdown-menu__bar {
            box-shadow: unset !important;
            height: 46px !important;
          }
          /deep/.van-dropdown-menu__item{
            height: 45px !important;
          }
        }
      }
      .head {
        padding: 0 20px;
        font-size: 12px;
        color: #aaa;
        margin-top: 60px;
        span {
          font-weight: 600;
          color: #e46360;
        }
      }
      .technical {
        /deep/.van-popup {
          position: relative;
          padding-bottom: 40px;
        .btn {
          width: 100vw;
          position: fixed;
          left: 0;
          bottom: 102px;
          button {
            width: 50%;
          }
        }
        }
        .title {
          display: block;
          color: #aaa;
          margin: 10px 0px;
        }
        .itembox {
          display: flex;
          flex-wrap: wrap;
          .item {
            flex-shrink: 0;
            width: 78px;
            height: 34px;
            margin: 0 8px 8px 0;
            border-radius: 5px;
            border: 1px solid #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              width: 58px;
              display: inline-block;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            &:nth-child(4n) {
              margin-right: 0;
            }
            &.active {
              border: none;
              color: #e46360;
              background-color: #ffc4c3;
            }
          }
        }
      }
    }
    .creatorbox{
      padding: 10px 25px;
      .you{
        p{
          font-size: 12px;
          color: #aaa;
          span{
            color: #e46360;
            font-weight: 600;
          }
        }
      }
      .kong{
        padding-top: 100px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        p{
          text-align: center;
          font-weight: 600;
          color: #888;
        }
        img{
          width: 100px;
          opacity: 0.5;
          display: block;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>